import React, { PureComponent } from 'react'

// import { connect } from '../utils/connect'
import { connect } from 'react-redux'


import {
  addAction,
  incAction
} from '../store/counter/actionCreators'

import {
  fetchHomeMultidataAction
} from '../store/home/actionCreators'

class Home extends PureComponent {

  componentDidMount() {
    

    /**
     * 使用中间件调用
     */
    this.props.getHomeMultidata()
  }

  render() {
    return (
      <div>
        <h1>Home</h1>
        <h2>当前计数：{this.props.counter}</h2>
        <button onClick={() => this.props.increment()}>+1</button>
        <button onClick={() => this.props.addNumber(5)}>+5</button>
      </div>
    )
  }

}

const mapStateToProps = state => {
  return {
    // counter: state.counter,
    counter: state.counterInfo.counter,
  }
}

const mapDispatchProps = dispatch => {
  return {
    increment() {
      console.log("???")
      dispatch(incAction())
    },
    addNumber(num) {
      dispatch(addAction(num))
    },
    getHomeMultidata() {
      console.log("发送数据")
      dispatch(fetchHomeMultidataAction)
    }
  }
}

export default connect(mapStateToProps, mapDispatchProps)(Home)
